<!-- 孔德嘉 入群审核 -->
<template>
  <div style="height: 100%">
    <el-card style="height: 100%">
      <el-page-header @back="goBack"> </el-page-header>
      <ul class="list">
        <li v-for="(item, index) in auditList" :key="index">
          <el-card class="card" shadow="hover">
            <!-- 发送者头像 -->
            <el-image
              style="
                vertical-align: middle;
                width: 60px;
                height: 60px;
                display: inline-block;
                border-radius: 50%;
              "
              :src="$imageUrl + item.groupImgId"
            ></el-image>
            <!-- 文字 -->
            <div class="text">
              <p class="textTop">
                <span class="weight">{{ item.userName }}</span
                >申请加入<span class="weight">{{ item.groupName }}</span
                >群
              </p>
              <p class="why">申请理由：{{ item.content }}</p>
            </div>
            <div style="float: right; height: 50px; padding-top: 10px">
              <!-- 未处理 -->
              <div v-if="item.type == 3">
                <el-button type="success" @click="toOkJoin(item)"
                  >通过</el-button
                >
                <el-button @click="toNoJoin(item)">拒绝</el-button>
              </div>
              <div v-if="item.type == 1 || item.type == 2">
                <el-button type="success">已通过</el-button>
              </div>
              <div v-if="item.type == 4">
                <el-button>已拒绝</el-button>
              </div>
            </div>
          </el-card>
        </li>
      </ul></el-card
    >
  </div>
</template>

<script>
import { FormItem } from "element-ui";
export default {
  data() {
    return {
      auditList: [], //审核列表
    };
  },
  computed: {
    userId() {
      return this.$store.state.user.userId;
    },
  },
  mounted() {
    this.getJoinGroupAudits();
  },
  methods: {
    //获取入群审核
    getJoinGroupAudits() {
      this.$axios
        .get("/joinGroup/getJoinGroupAudits", {
          params: {
            userId: this.userId,
          },
        })
        .then((res) => {
          if (res.data.flag) {
            this.auditList = res.data.data;
          } else {
            this.$message("warning", res.data.code);
          }
        })
        .catch((err) => {
          this.$message("warning", "对不起，获取审核失败！"); // 添加或修改失败
        });
    },
    //拒绝审核
    toNoJoin(item) {
      this.$prompt("请输入拒绝原因", "拒绝原因", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          this.$message({
            type: "success",
            message: "拒绝原因是: " + value,
          });
          // 发送到后台
          let data = {
            refuseReason: value,
            userId: item.userId,
            groupId: item.groupId,
          };
          //发送到后端
          this.$axios
            .post("/joinGroup/toNoJoin", data)
            .then((res) => {
              if (res.data.flag) {
                this.getJoinGroupAudits();
              } else {
                this.$message("warning", res.data.code);
              }
            })
            .catch((err) => {
              this.$message("warning", "对不起，发送失败！"); // 添加或修改失败
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    //同意审核
    toOkJoin(item) {
      let data = {
        userId: item.userId,
        groupId: item.groupId,
      };
      //发送到后端
      this.$axios
        .post("/joinGroup/toOkJoin", data)
        .then((res) => {
          if (res.data.flag) {
            this.getJoinGroupAudits();
          } else {
            this.$message("warning", res.data.code);
          }
        })
        .catch((err) => {
          this.$message("warning", "对不起，发送失败！"); // 添加或修改失败
        });
    },
    //放回之前页面
    goBack() {
      this.$router.push({ path: "/group/index" });
    },
  },
};
</script>

<style>
.list {
  width: 100%;
  height: 100%;
  margin-top: 30px;
  overflow: auto;
}
.el-card__body {
  height: 100%;
}
el-card is-always-shadow {
  height: 100%;
}
.list li {
  list-style: none;
  padding: 0 50px;
}
.card {
  padding: 0 50px;
}
.text {
  display: inline-block;
  margin-left: 20px;
  height: 60px;
  vertical-align: middle;
}
.textTop {
  font-size: 18px;
  height: 30px;
  line-height: 30px;
}
.weight {
  font-weight: 700;
  font-size: 20px;
  margin: 0 4px;
}
.why {
  height: 30px;
  line-height: 30px;
  color: #aaaaaa;
  font-size: 16px;
  font-weight: 400;
  margin-left: 4px;
}
</style>